<template>
	<view class="comment-box">
		<u-navbar title="添加楼栋" :autoBack="true" :fixed="true" :placeholder="true"
			:titleStyle="{ color: '#333',fontSize: '16px', }">
		</u-navbar>
		<view class="cord">
			<view>
				<!-- 注意，如果需要兼容微信小程序，最好通过setRules方法设置rules规则 -->
				<u--form labelPosition="left" :model="model1" :rules="rules" ref="uForm">
					<u-form-item prop="zone" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">楼栋区域<span style="color: red">*</span></span>
							<span @click="selectZone"
								style="display: flex;align-items: center;">{{model1.zone?model1.zone:'请选择'}}
								<u-icon slot="right" name="arrow-right"></u-icon>
							</span>
						</view>
					</u-form-item>
					<u-form-item prop="name" borderBottom ref="item1">
						<view class="box-flex">
							<span style="margin-right: 10rpx">楼栋名称<span style="color: red">*</span></span>
							<u--input inputAlign="right" v-model="model1.name" placeholder="请输入楼栋名称"
								border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="address" borderBottom ref="item1">
						<view class="box-flex"><span style="margin-right: 10rpx">楼栋地址<span
									style="color: red">*</span></span>
							<u--input inputAlign="right" v-model="model1.address" placeholder="请输入楼栋地址"
								border="none"></u--input>
						</view>
					</u-form-item>
					<u-form-item prop="floor_num" borderBottom ref="item1">
						<view class="box-flex"><span style="margin-right: 10rpx">楼层<span
									style="color: red">*</span></span>
							<u--input inputAlign="right" type="number" v-model="model1.floor_num"
								disabledColor="#ffffff" placeholder="请填写楼栋层数" border="none"></u--input><span
								style="margin-left: 10rpx">层</span>
						</view>
					</u-form-item>
					<u-form-item prop="area" borderBottom ref="item1">
						<view class="box-flex"><span style="margin-right: 10rpx">面积<span
									style="color: red">*</span></span>
							<u--input inputAlign="right" type="number" v-model="model1.area" disabledColor="#ffffff"
								placeholder="请填写楼栋面积" border="none"></u--input><span style="margin-left: 10rpx">㎡</span>
						</view>
					</u-form-item>
					<u-form-item borderBottom>
						<view class="">
							<view style="display: flex; justify-content: space-between">
								<span style="margin-right: 10rpx; color: #666666"> 房源照片</span>
								<span style="margin-right: 10rpx; color: #666666"> {{ fileList.length }}/6</span>
							</view>
							<view style="margin-top: 10rpx">
								<u-upload :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="6"
									multiple :maxCount="6" width="128rpx" height="128rpx">
									<image src="../static/images/tp.png" mode="widthFix"
										style="width: 128rpx; height: 128rpx"></image>
								</u-upload>
							</view>
						</view>
					</u-form-item>
				</u--form>
			</view>
		</view>
		<view class="submitbox" @click="submit">提交</view>
	</view>
</template>

<script>
	import {
		buildingadd
	} from "@/api/landlord.js";
	// 定义事件名称常量（避免魔法字符串）
	const EVENT_TYPES = {
		ZONE_SELECT: 'selectZone',
	};
	export default {
		data() {
			return {
				towards: false,
				model1: {
					address: "",
					floor_num: "",
					area: null,
					zone: "",
					name: ""
				},
				towardsListindex: 0,
				fileList: [],
				urllist: [],
				rules: {
					"name": {
						type: "string",
						required: true,
						message: "请输入名称",
						trigger: ["blur", "change"],
					},
					"address": {
						type: "string",
						required: true,
						message: "请选择地址",
						trigger: ["blur", "change"],
					},
					"floor_num": {
						type: "number",
						required: true,
						message: "请输入楼层数",
						trigger: ["blur", "change"],
					},
					"area": {
						type: "number",
						required: true,
						message: "请输入面积",
						trigger: ["blur", "change"],
					},
				},
				radio: "",
				switchVal: false,
			};
		},
		onLoad(options) {
			if (options && options.zone_id) {
				this.model1.zone_id = options.zone_id;
				this.model1.zone = options.zone;
			}
		},
		onShow() {
			this.initEventListeners()
		},
		methods: {
			selectZone() {
				uni.navigateTo({
					url: '/pages-landlord/room-manage/select-zone'
				})
			},
			// 初始化事件监听
			initEventListeners() {
				// 区域选择
				uni.$on(EVENT_TYPES.ZONE_SELECT, this.handleZoneSelect);

			},
			// 移除事件监听
			removeEventListeners() {
				// uni.$off(EVENT_TYPES.ZONE_SELECT);
				uni.$off(EVENT_TYPES.BUILDING_SELECT);
			},
			// 处理区域选择
			handleZoneSelect(zone) {
				if (zone) {
					this.model1.zone = zone.name;
					this.removeEventListeners();
				}
			},
			// selectLocation() {
			// 	// wgs84 gcj02
			// 	var that = this;
			// 	wx.chooseLocation({
			// 		type: "gcj02",
			// 		success: (res) => {
			// 			console.log(res);
			// 			this.model1.address = res.name;
			// 		},
			// 	});
			// },
			// 删除
			deletePic(e) {
				this["fileList"].splice(0, 1);
			},
			// 回显上传本地图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file);
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url);
					this["fileList"].push({
						...lists[i],
						//提示上传中
						status: "success",
						message: "上传成功",
						urls: result.url,
					});
				}
				console.log(this.fileList);
			},
			// 上传图片
			uploadFilePromise(url) {
				// token
				const token = uni.getStorageSync("userInfo").token;
				return new Promise((resolve, reject) => {
					uni.uploadFile({
						// 完整上传路径 H5端需要解决跨域问题
						url: `${this.$Config.HTTP_REQUEST_URL}/api/common/upload`,
						// 本地上传读取到的url
						filePath: url,
						name: "file",
						// 请求头
						header: {
							"Content-Type": "application/x-www-form-urlencoded",
							token: token,
						},
						// 附加表单对象
						formData: {
							user: "test",
						},
						success: (res) => {
							// 这里res是普通对象，但是res.data为JSON字符串，需要转一下
							const result = JSON.parse(res.data);
							resolve(result.data);
						},
					});
				});
			},
			submit() {
				this.$refs.uForm
					.validate()
					.then((res) => {
						// uni.$u.toast('校验通过')
						let arr = [];
						if (this.fileList.length == 0) {
							uni.$u.toast("请上传图片");
						}
						this.fileList.forEach((item) => {
							arr.push(item.urls);
						});
						let data = {
							...this.model1,
							images: arr,
						};
						// 添加楼栋
						buildingadd(data).then((res) => {
							uni.$u.toast(res.data.msg);
							uni.navigateBack({
								delta: 1, // 返回的页面层级，1表示返回上一页
							});
						});
					})
					.catch((errors) => {
						uni.$u.toast("校验失败");
					});
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules);
		},
	};
</script>

<style lang="scss" scoped>
	page {
		background: #f5f5f5;
	}

	.towardsbox {
		width: 100%;
		// border: 1rpx solid red;
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;

		.towardsboxzbox {
			width: 30%;
			display: flex;
			border-radius: 40rpx;

			background-color: #f5f6fa;
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}

		.towardsboxzboxs {
			width: 30%;
			display: flex;
			border-radius: 40rpx;
			border: 1rpx solid #ffa279;
			background-color: #fff6ed;
			color: #ffa279;
			justify-content: center;
			height: 80rpx;
			align-items: center;
		}
	}

	.towardstop {
		display: flex;
		justify-content: space-between;
		margin-bottom: 40rpx;

		.towardstopz {
			color: #aeaeae;
		}

		.towardstopy {
			color: #fe6a2a;
		}
	}

	.submitbox {
		width: 100%;
		margin: 0 auto;
		border-radius: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100rpx;
		color: #fff;
		background-color: #fe4f04;
	}

	.box-flex {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		color: #666666;
		padding: 10rpx 0;
	}

	.comment-box {
		box-sizing: border-box;
		padding: 15rpx;
	}

	.cord {
		margin: 30rpx 0;
		box-sizing: border-box;
		padding: 15rpx 30rpx;
		background: #fff;
		border-radius: 15rpx;
	}
</style>